<template>
  <view class="uni-container">
    <uni-forms ref="form" :model="formData" validateTrigger="bind">
		<uni-forms-item name="department_id" label="部门" required>
				<uni-data-select
					 collection="mydb-department"
					 field="_id as value, name as text"
					 v-model="formData.department_id"
				 />
		</uni-forms-item>
		<uni-forms-item name="num" label="编号" required>
		  <uni-easyinput placeholder="员工唯一编号" v-model="formData.num"></uni-easyinput>
		</uni-forms-item>
		<uni-forms-item name="avatar" label="头像照片">
		  <uni-file-picker return-type="object" v-model="formData.avatar"></uni-file-picker>
		</uni-forms-item>
      <uni-forms-item name="username" label="姓名" required>
        <uni-easyinput placeholder="姓名" v-model="formData.username" trim="both"></uni-easyinput>
      </uni-forms-item>
	  <uni-forms-item name="mobile" label="电话" required>
	    <uni-easyinput placeholder="电话" v-model="formData.mobile" trim="both"></uni-easyinput>
	  </uni-forms-item>
	  <uni-forms-item name="id_card" label="身份证号码">
		<uni-easyinput placeholder="身份证号码" v-model="formData.id_card" trim="both"></uni-easyinput>
	  </uni-forms-item>
      <uni-forms-item name="gender" label="性别">
        <uni-data-checkbox v-model="formData.gender" :localdata="formOptions.gender_localdata"></uni-data-checkbox>
      </uni-forms-item>
	   <uni-forms-item name="origin_place" label="籍贯">
	          <uni-data-picker self-field="code" parent-field="parent_code" v-model="formData.origin_place" collection="opendb-city-china" orderby="value asc" field="code as value, name as text, eq(type, 2) as isleaf"></uni-data-picker>
	        </uni-forms-item>
		<uni-forms-item name="address" label="现居地">
		  <uni-easyinput placeholder="现居地" v-model="formData.address" trim="both"></uni-easyinput>
		</uni-forms-item>
 
      <uni-forms-item name="year" label="年龄">
        <uni-easyinput type="number" placeholder="年龄" v-model="formData.year"></uni-easyinput>
      </uni-forms-item>
	  <uni-forms-item name="workDate" label="入职时间">
	     <uni-datetime-picker type="date" return-type="date" v-model="formData.workDate"></uni-datetime-picker>
	   </uni-forms-item>
		<uni-forms-item name="emergency_name" label="紧急联系人">
		  <uni-easyinput placeholder="紧急联系人" v-model="formData.emergency_name" trim="both"></uni-easyinput>
		</uni-forms-item>
		<uni-forms-item name="emergency_mobile" label="紧急联系电话">
		  <uni-easyinput placeholder="紧急联系电话" v-model="formData.emergency_mobile" trim="both"></uni-easyinput>
		</uni-forms-item>
   
      <uni-forms-item name="email" label="邮箱">
        <uni-easyinput placeholder="邮箱地址" v-model="formData.email" trim="both"></uni-easyinput>
      </uni-forms-item>
	   <uni-forms-item name="resume" label="简历">
	          <uni-file-picker return-type="object" v-model="formData.resume"></uni-file-picker>
	        </uni-forms-item>
	        <uni-forms-item name="education" label="教育经历">
	          <uni-data-checkbox v-model="formData.education" :localdata="formOptions.education_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="experience" label="工作经历">
	          <textarea placeholder="工作经历" @input="binddata('experience', $event.detail.value)" class="uni-textarea-border" v-model="formData.experience" trim="both"></textarea>
	        </uni-forms-item>
      <uni-forms-item name="comment" label="备注">
        <textarea placeholder="备注" @input="binddata('comment', $event.detail.value)" class="uni-textarea-border" v-model="formData.comment" trim="both"></textarea>
      </uni-forms-item>
      
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
  import { validator } from '../../js_sdk/validator/mydb-employee.js';

  const db = uniCloud.database();
  const dbCmd = db.command;
  const dbCollectionName = 'mydb-employee';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.includes(key)) {
        result[key] = validator[key]
      }
    }
    return result
  }

  

  export default {
    data() {
      let formData = {
        "username": "",
        "gender": 1,
        "mobile": "",
        "num": "",
        "department_id": "",
		"area_code": "",
		"origin_place": "",
		"address": "",
		"avatar": null,
		"emergency_name": "",
		"emergency_mobile": "",
		"id_card": "",
		"workDate": null,
		"year": null,
		"email": "",
		"resume": null,
		"education": "",
		"experience": "",
		"comment": ""
      }
      return {
        formData,
        formOptions: {
          "gender_localdata": [
            {
              "text": "男",
              "value": 1
            },
            {
              "text": "女",
              "value": 2
            }
          ],
		    "education_localdata": [
		              {
		                "value": "初中",
		                "text": "初中"
		              },
		              {
		                "value": "中专",
		                "text": "中专"
		              },
		              {
		                "value": "高中",
		                "text": "高中"
		              },
		              {
		                "value": "大专",
		                "text": "大专"
		              },
		              {
		                "value": "本科",
		                "text": "本科"
		              },
		              {
		                "value": "硕士",
		                "text": "硕士"
		              }
		            ]
        },
        rules: {
          ...getValidator(Object.keys(formData))
        }
      }
    },
	onLoad(options) {
	  if (options.department_id) {
	    this.formData.department_id = options.department_id
	  }
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      
      /**
       * 验证表单并提交
       */
      submit() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then((res) => {
          return this.submitForm(res)
        }).catch(() => {
        }).finally(() => {
          uni.hideLoading()
        })
      },

      /**
       * 提交表单
       */
      submitForm(value) {
        // 使用 clientDB 提交数据
        return db.collection(dbCollectionName).add(value).then((res) => {
          uni.showToast({
            title: '新增成功'
          })
          this.getOpenerEventChannel().emit('refreshData')
          setTimeout(() => uni.navigateBack(), 500)
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        })
      }
    }
  }
</script>
